<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Opacity Example | Chapter 4 | CSS Mastery </title>
<style  type="text/css">

/* Pretty */

body {
	margin-top: 1em;
}

.box {
	width: 20em;
	position: absolute;
	top: 110px;
	left: 50%;
	margin-left: -12em;
	background: #000;
	padding: 0 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	color: #fff;
}

h2 {
	margin-top: 1em;
}

/* Example */

.box {
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=50); /*proprietary IE code*/
}


</style>
</head>
<body>

<h1>All Work and No Play</h1>

<p>Makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>


<div class="box">
<h2>Heeeere's Johnny</h2>
<p>This box is opaque. That means you can see through it. Cool huh?</p>
</div>

</body>
</html>